<!-- 商品详细页 -->
<template>
  <MainFrame />
  <div class="content">
    <div class="good_left">
      <el-image class="good_img"
                :src="goods.goodsImgurl"
                :fit="fit"
                :preview-src-list="srcList"
                :initial-index="4"
                style="width:300px;height:300px" />
    </div>
    <div class="good_right">
      <div class="goods_name">{{ goods.goodsName }}</div>
      <div class="goods_price">¥{{ goods.goodsPrice }}</div>
      <div class="goods_des">{{ goods.goodsDes }}</div>
      <el-button class="but_add"
                 type=""
                 text
                 @click="addCar()">加入购物车</el-button>
      <el-button class="but_pay"
                 type=""
                 text
                 @click="paygoods()">立即购买</el-button>
    </div>

  </div>
  <goodscard />
  <headcard />
</template>

<script>
import Goodscard from '../views/AboutView.vue'
import Headcard from '../components/Head.vue'
import MainFrame from '../views/MainFrame.vue'
import { ElMessage } from 'element-plus'
export default {
  name: 'goodsdatail',
  components: {
    Headcard,
    Goodscard,
    MainFrame,
  },
  data() {
    return {
      goods: {}, // 商品数据
      srcList: [
        'https://www.chali.com/assets/images/banner.3c6c1f8.jpg',
        'https://www.chali.com/assets/images/banner.18cb9d6.jpg',
        'https://www.chali.com/assets/images/banner1.996edc6.jpg',
      ], // 点击图片放大
    }
  },
  created() {
    console.log(this.$route.query.userId)

    // 通过商品id获取商品信息
    this.$http({
      url: '/getOneById',
      method: 'GET',
      params: {
        id: this.$route.query.userId,
      },
    }).then((success) => {
      console.log(success.data)
      this.goods = success.data
    })

    let username = this.$store.state.user.username //获取vuex中store的用户名
    // 通过用户名获取用户信息
    this.$http({
      url: '/getOneUser',
      method: 'GET',
      params: {
        username: username,
      },
    }).then((success) => {
      console.log(success.data)
      this.user = success.data
    })
  },

  methods: {
    // 添加到购物车
    addCar() {
      var goods = this.goods
      goods.goodsNum = 1
      console.log('加入之前' + goods.goodsId)
      this.$store.commit('addToCar', goods)
    },
    // 购买商品
    paygoods() {
      console.log(this.$store.state.user.username)
      console.log('查看用户状态' + this.user.userId)

      var good_id = new Array()
      good_id[0] = this.goods.goodsOutId
      var og_num = new Array()
      og_num[0] = this.goods.goodsNum

      // 通过用户id及相关商品信息（id、价钱、订单价钱、订单数量）增加订单
      this.$http
        .post('/addOrders', {
          user_id: this.user.userId,
          good_id: good_id, // 数组
          order_price: parseFloat(this.goods.goodsId),
          og_price: parseFloat(this.goods.goodsPrice),
          og_num: og_num, // 数组
        })
        .then((success) => {
          console.log(success.data)
          ElMessage({
            message: success.data,
            type: 'success',
          })
        })
    },
  },
}
</script>

<style>
.content {
  display: flex;
}
.good_left {
  width: 40%;
}
.good_right {
  width: 50%;
  float: left;
}
.goods_name {
  font-size: 24px;
  font-weight: 600;
}
.goods_price {
  font-size: 28px;
  font-weight: 800;
  color: rgb(255, 79, 0);
}
.goods_des {
  font-size: 20px;
  font-weight: 500;
}
.but_add {
  margin-top: 30px;
  font-size: 24px;
  padding: 10px 5px;
}
.but_pay {
  margin-top: 30px;
  font-size: 24px;
}
</style>